<!--
 * @Descripttion: 下拉框编辑组件
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-09 13:59:30
 * @LastEditors: GW
 * @LastEditTime: 2021-09-14 14:49:22
-->
<template>
    <section class="edit-wrapper">
        <p>标题</p>
        <a-input v-model="data.title" maxLength="16"></a-input>
        <a-divider></a-divider>
        <a-checkbox v-model="data.onFill">是否必填</a-checkbox>
        <a-divider></a-divider>
        <p>选项设置</p>
        <div class="option-box" v-for="(item,index) in data.data" :key="item">
            <a-input class="select-input" v-model="item.label" maxLength="16" @change="changeItem"></a-input>
            <div class="close" @click="deleteItem(index)" v-if="data.data.length > 1">
                <a-icon type="close-square" />
            </div>
        </div>

        <a-button @click="addItem" class="add-btn">添加</a-button>
    </section>
</template>

<script>
export default {
    name: 'Select',
    props: {
        data: {
            type: Object,
            default: {}
        }
    },
    methods: {
        addItem () {
            //添加选项
            let data = this.data.data;
            console.log('datadatadata', data)
            if (data) {
                data.forEach((item, index) => {
                    item.key = index + 1;
                });
                let length = data.length;
                let d = { key: length + 1, label: '选项' + (Number(length) + 1) };
                data.push(d);
            }
        },
        deleteItem (i) {
            //删除选项
            let data = this.data.data;
            data.splice(i, 1);
        },
        changeItem (e, v) {
            console.log(e, v)
        }
    }
}
</script>

<style lang="less" scoped>
    .edit-wrapper {
        padding: 10px 10px 28px;
        .option-box {
            position: relative;
            padding: 4px;
            border: 1px dashed #fff;
            &:hover {
                border: 1px dashed #666;
            }
            .select-input {
                width: calc(100% - 50px);
            }
            .close {
                position: absolute;
                top: 9px;
                right: 16px;
                cursor: pointer;
            }
        }
        .add-btn {
            margin-left:5px;
            width: calc(100% - 61px);
            border-radius: 0;
        }
    }
</style>